<template>
	<div class="apld-charts" ref="chartRef" />
</template>

<script setup lang="ts">
import {ref,toRefs,onMounted, PropType } from 'vue'
import * as echarts from 'echarts/core'
import { useCharts, ChartType } from './useCharts'

defineOptions({
	name: 'apld-charts',
})

const chartRef = ref<HTMLDivElement>()

const props = defineProps({
  type: {
    type: String as any,
    default: "BasicBar"
  },
	option: {
		type: Object as PropType<echarts.EChartsCoreOption>,
		default: () => ({}),
		required: false,
	},
  timeLoad: {
    type: Boolean,
    default:false
  }
})
const { type, option } = toRefs(props);

const { charts, setOptions, initChart } = useCharts({type,  el: chartRef,timeLoad:props.timeLoad })

onMounted(() => {
	nextTick(async()=> {
    await initChart(option.value)
  })
  if(props.option) {
    setOptions({
     ...props.option
    })
  }
})

defineExpose({
  myChart: charts,
  setOptions
});
</script>

<style scoped lang="scss">
.apld-charts {
	width: 100%;
	height: 100%;
	// height: 60svh;
	min-height:vw(300);
  
}
</style>
